<template>
  <div class="group_frame">
    <div class="group_left_area">
      <el-row style="margin-top:5%">
        <el-col :span="24">
          <el-input placeholder="请输入内容" v-model="input_val" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="房间名" value="1"></el-option>
              <el-option label="房间ID" value="2"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="searchGroup"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <div class="group_right_area">
      <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" infinite-scroll-disabled="disabled">
        <li v-for="i in dataList" class="infinite-list-item" :key="i.roomId">
          <el-descriptions class="margin-top" title="房间信息" :column="1" :size="'mini'" border style="margin-top:2%">
            <template slot="extra">
              <el-button type="primary" size="mini" :disabled="i.roomOwnerId == user.userId">申请加入</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                房间名
              </template>
              {{ i.roomName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                房间号
              </template>
              {{ i.roomId }}
            </el-descriptions-item>
          </el-descriptions>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
// Ychat的群组搜寻 申请 批准等功能
import { mapState } from 'vuex'
export default {
  name: "Groups",
  data() {
    return {
      input_val: "",
      select: '1',
      dataList: [],
      pageSize: 5,
      pageNum: 1,
      disabled: false
    }
  },
  computed: {
    ...mapState('userAbout', ['token', 'user'])
  },
  methods: {
    searchGroup() {
      this.disabled = true
      this.pageNum = 1
      this.dataList = []
      if (this.select == '1') {
        this.$basicAxios(this.$ms.search_group_byName(this.input_val, this.token, this.pageNum, this.pageSize), (resp) => {
          this.dataList = resp.data.data
          if (resp.data.data.length == 0) this.disabled = true
          this.pageNum++
        })
      } else {
        this.disabled = true // 根据id搜索 禁用无限加载
      }
    },
    load() {
      this.$basicAxios(this.$ms.search_group_byName(this.input_val, this.token, this.pageNum, this.pageSize), (resp) => {
        this.dataList.push(...resp.data.data)
        if (resp.data.data.length == 0) this.disabled = true
        this.pageNum++
      })
    }
  }
}
</script>

<style>
.group_frame {
  width: 100%;
  height: 100%;
}

.group_left_area {
  width: 45%;
  padding-right: 3%;
  height: 100%;
  float: left;
  background: #efefef;
}

.group_right_area {
  width: 55%;
  height: 100%;
  float: left;
  overflow-y: scroll;
}
</style>